﻿@using Freesql.Tool.Helpers;
@using Freesql.Tool.Models;
@using System.Collections.Generic;
@{
    var gen = Model as Freesql.Tool.Models.RazorTemplateModel;
    var classPath = $"{gen.NameSpace}.Domain.Entities.{gen.TableName}";
    var description = ReflectionHelper.GetDescription(classPath);
}
<template>
    <DynamicTable header-title="@(description)管理" show-index title-tooltip="提醒标题" :data-request="loadTableData" :columns="columns" :row-selection="rowSelection">
        <template v-if="isCheckRows" #title>
            <Alert class="w-full" type="info" show-icon>
                <template #message>
                    已选 {{ isCheckRows }} 项
                    <a-button type="link" @@click="rowSelection.selectedRowKeys = []">取消选择</a-button>
                </template>
            </Alert>
        </template>
        <template #toolbar>
            <a-button type="primary"  @@click="openUserModal({})">
                <Icon icon="ant-design:plus-outlined" /> 新增
            </a-button>
            <a-button type="error" :disabled="!isCheckRows" @@click="delRowConfirm(rowSelection.selectedRowKeys)">
                <Icon icon="ant-design:delete-outlined" /> 删除
            </a-button>
        </template>
    </DynamicTable>
</template>

<script setup lang="tsx">import { ExclamationCircleOutlined } from '@@ant-design/icons-vue';
    import { Modal, Alert } from 'ant-design-vue';
    import { @(gen.LowerTableName)Schemas } from './formSchemas';
    import { baseColumns, type TableListItem, type TableColumnItem } from './columns';
    import type { LoadDataParams } from '@@/components/core/dynamic-table';
    import { SplitPanel } from '@@/components/basic/split-panel';
    import { useTable } from '@@/components/core/dynamic-table';
    import Api from '@@/api/';
    import { useFormModal } from '@@/hooks/useModal/';
    import { findPath } from '@@/utils/common';

    defineOptions({
        name: '@(gen.Manager+gen.TableName)',
    });

    const [DynamicTable, dynamicTableInstance] = useTable({ formProps: { autoSubmitOnEnter: true } });
    const [showModal] = useFormModal();

    const rowSelection = ref({
        selectedRowKeys: [] as string[],
        onChange: (selectedRowKeys: string[], selectedRows: TableListItem[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            rowSelection.value.selectedRowKeys = selectedRowKeys;
        },
    });

    // 是否勾选了表格行
    const isCheckRows = computed(() => rowSelection.value.selectedRowKeys.length);

    const loadTableData = async (params: LoadDataParams) => {
        //@@ts-ignore
        const data = await Api.@(gen.LowerTableName).@(gen.LowerTableName)s({
            ...params,

        });
        rowSelection.value.selectedRowKeys = [];
        return data;
    };

    /**
     * @@description 打开操作@(description)弹窗
     */
    const openUserModal = async (record: Partial<TableListItem> = {}) => {
        const { edit } = Api.@(gen.LowerTableName);
        const isUpdate = Boolean(record.id);
        const [formRef] = await showModal({
            modalProps: {
                title: `${isUpdate ? '编辑' : '新增'}@(description)`,
                width: 700,
                onFinish: async (values) => {
                    console.log('新增/编辑@(description)', values);
                    //@@ts-ignore
                    values.id = record.id;
                    const ok = await edit(values);
                    if (!ok) {
                        return false;
                    }
                    dynamicTableInstance?.reload();
                },
            },
            formProps: {
                labelWidth: 100,
                schemas: @(gen.LowerTableName)Schemas,
                autoSubmitOnEnter: true,
            },
        });

        if (record.id) {//更新
            formRef?.setFieldsValue({
                ...record,
                //xxField:xx, 追加初始字段值，通常为关联表数据
            });

            //禁用某字段
            //formRef?.updateSchema([
            //    { field: 'xx', componentProps: { disabled: true } }
            //]);
        } else {
            //启用某字段
            //formRef?.updateSchema([
            //    { field: 'xx', componentProps: { disabled: false } }
            //]);
        }


    };

    /**
     * @@description 表格删除行
     */
    const delRowConfirm = async (id: string | string[]) => {
        if (Array.isArray(id)) {
            Modal.confirm({
                title: '确定要删除所选的@(description)吗?',
                icon: <ExclamationCircleOutlined />,
                centered: true,
                onOk: async () => {
                    await Api.@(gen.LowerTableName).myDelete(id);
                    dynamicTableInstance?.reload();
                },
            });
        } else {
            await Api.@(gen.LowerTableName).myDelete([id]);
            dynamicTableInstance?.reload();
        }
    };

    const columns: TableColumnItem[] = [
        ...baseColumns,
        {
            title: '操作',
            width: 80,
            dataIndex: 'ACTION',
            fixed: 'right',
            actions: ({ record }) => [
                {
                    icon: 'ant-design:edit-outlined',
                    tooltip: '编辑@(description)资料',
                    auth: {
                        //perm: 'system:@(gen.LowerTableName):update',
                        effect: 'disable',
                    },
                    onClick: () => openUserModal(record),
                },
                {
                    icon: 'ant-design:delete-outlined',
                    color: 'red',
                    tooltip: '删除此账号',
                    //auth: 'system:@(gen.LowerTableName):delete',
                    popConfirm: {
                        title: '你确定要删除吗？',
                        placement: 'left',
                        onConfirm: () => delRowConfirm(record.id),
                    },
                },
            ],
        },
    ];</script>

<style></style>
